<template>
  <div>
    <p>
      特惠专区&nbsp; |
      <span class="span1">
        &nbsp;限购一杯&nbsp; 剩余
        <van-count-down :time="time" />
      </span>
      <router-link to="/tide">
        <span class="span2">
        更多商品
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-dayuhao" />
        </svg>
      </span>
      </router-link>
      
    </p>
    <div class="list">
      <PreferenceCon  />
    </div>
  </div>
</template>

<script>
import PreferenceCon from "./preferencecon.vue";
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000
    };
  },
  components: {
    PreferenceCon
  }
};
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-evenly;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
div {
  /* padding-top: 0.1rem; */
  border-radius: 5px;
  width: 3.58rem;
  /* height: 1.7rem; */
  font-size: 16px;
  background-color: #fb5450;
  margin: auto;
  color: white;
}
p {
  padding-top: 0.15rem;
  margin-left: 0.1rem;
  height: 0.4rem;
}
.span1 {
  font-size: 10px;
}
.van-count-down {
  width: 0.5rem;
  height: 0.1rem;
  margin-top: -0.18rem;
  margin-left: 1.56rem;
  font-size: 10px;
}
/* .router-link{
  color: white;
} */
.span2 {
  float: right;
  font-size: 10px;
  margin-right: 0.2rem;
  margin-top: -0.1rem;
  color: white;
}
</style>